<template>
	<view>
		<view style="padding: 20rpx;">
			<view style="font-weight: bold;margin: 20rpx 0 0 0;">申请详情</view>
		</view>
		<view class="truck_item">
			<view class="div_item">
				<view>驾驶员<span>{{approve.flight.driver || '--'}}</span></view>
				<view>电话 <span>{{approve.flight.driverTel || '--'}}</span></view>
			</view>
			<view class="div_item">
				<view>线路<span>{{approve.flight.addrfrom || '--'}} → {{approve.flight.addrto || '--'}}</span></view>
				<!-- <view>装车单号<span>{{item.loadno || '--'}}</span></view> -->
			</view>
			<view class="div_item">
				<view>收款人<span>{{approve.bank.username || '--'}}</span></view>
				<view>账号<span>{{approve.bank_code || '--'}}</span></view>
			</view>
			<view class="div_item">
				<view>开户行<span>{{approve.bank.bank_name || '--'}}{{approve.bank.bank_deposit || '--'}}</span></view>
				<!-- <view>账号<span>{{item.bank_code || '--'}}</span></view> -->
			</view>

			<view class="div_item">
				<view>当前状态<span>{{ getStatusTxt(approve.status)}}</span></view>
				<!-- <view>账号<span>{{item.bank_code || '--'}}</span></view> -->
			</view>

			<!-- 底部操作菜单 -->
			<!-- 			<view class="op_menu_div">
				<view class="btn_share" @click.stop="onApprove(item)">审核</view>
			</view> -->

		</view>

		<view style="padding: 20rpx;">
			<view style="font-weight: bold;">备注</view>
			<input :value="remark" @input="onInputRemark" class="et_remark" placeholder="请输入备注" />
		</view>

		<view class="btn_div">
			<view></view>
			<view style="display: flex;">
				<view class="btn_share" @click="onAgree">通过</view>
				<view class="btn_share" @click="onRefuse">拒绝</view>
			</view>
			<view></view>
		</view>

	</view>
</template>

<script>
	import { getStatusTxt } from '@/utils/util.js'
	export default {
		data() {
			return {
				approve: {}, // 传过来的审核对象
				remark: '', // 备注
				status: '', // 需要修改的审核状态 申请状态 1=审核中 2=已拒绝 3=已打款 4=待财务审核 5=待打款
			}
		},

		onLoad(opt) {
			let that = this
			// console.log('审批页面收到的审批对象 = ', JSON.parse(opt.approve));
			this.approve = JSON.parse(opt.approve)
		},

		methods: {

			// 输入备注
			onInputRemark(e) {
				// console.log('经理输入的备注 = ', e.detail.value);
				this.remark = e.detail.value
			},

			// 通过
			onAgree() {
				let that = this
				uni.showModal({
					title: '提示',
					content: '是否通过该车费申请？',
					success: res => {
						if (res.confirm) {
							that.status = '4'
							that.postExeApprove()
						} else if (res.cancel) {
							console.log('审核同意按钮,用户点击取消');
						}
					}
				})
			},

			// 拒绝
			onRefuse() {
				let that = this
				if (!that.remark) {
					this.$toast('请备注拒绝原因')
					return
				}
				uni.showModal({
					title: '提示',
					content: '是否拒绝该车费申请？',
					success: res => {
						if (res.confirm) {
							that.status = '2'
							that.postExeApprove()
						} else if (res.cancel) {
							console.log('审核拒绝按钮,用户点击取消');
						}
					}
				})
			},

			async postExeApprove() {
				let that = this
				let uinfo = this.$getUserInfo()
				// memberid: '200017',
				// accountid: '7789925a89204c38a0c1f9e73cbdc293',
				// status 2/4 remark 申请状态 1=审核中 2=已拒绝 3=已打款 4=待财务审核 5=待打款
				let res = await this.$exeFreightApply({
					id: that.approve.id,
					status: that.status,
					remark: that.remark,
				})
				// console.log('postExeApprove.res =', res);
				uni.showModal({
					title: '提示',
					content: res.msg,
					showCancel: false,
					success: result => {
						if (result.confirm) {
							if (res.code == 1) {
								uni.navigateBack()
							} else {

							}
						}
					}
				})
				// 车费审核完成 发送消息到列表更新状态
				uni.$emit('onApproveFreight', {})
			},

			getStatusTxt(status) {
				return getStatusTxt(status)
			},

		}
	}
</script>

<style scoped>
	.truck_item {
		margin: 0 20rpx 20rpx 20rpx;
		padding: 0 0 20rpx 0;
		border: solid 1rpx rgba(0, 0, 0, 0.15);
		border-radius: 10rpx;
	}

	.div_item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 14rpx 14rpx 0 14rpx;
		font-size: 28rpx;
	}

	span {
		/* display: block; */
		margin: 0 0 0 10rpx;
		color: #1890FF;
		font-size: 26rpx;
	}

	.op_menu_div {
		display: flex;
		justify-content: flex-end;
		padding: 14rpx;
	}

	.btn_share {
		background-color: #1890FF;
		width: 118rpx;
		height: 52rpx;
		line-height: 52rpx;
		text-align: center;
		font-size: 24rpx;
		color: white;
		border-radius: 4rpx;
		margin: 0 0 0 12rpx;
	}

	.et_remark {
		border-bottom: solid 1rpx rgba(0, 0, 0, 0.15);
		margin: 20rpx 0 20rpx 0;
		padding: 0 0 10rpx 0;
	}

	.btn_div {
		display: flex;
		justify-content: space-between;
		margin: 60rpx 20rpx 0 20rpx;
	}
</style>